<template>
	<view class="content">
			<view class="information">
				<text class="title">我的诚意金账户</text>
				<view class="center">
					<text  class="yet-text">{{userData?JSON.parse(userData).card2:'未开户'}}</text>
					<view style="width:100%;display: flex;justify-content: flex-end">
						<view  size="mini" class="prestore-button" @click="goUrl(userData?'building/index':'steps/index1')">
							{{userData?'缴存诚意金':'去开户'}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<view style="width: 50%;display: flex;border-right:1px solid rgba(223, 132, 120, 1) ">
						<text @click="goUrl('account/business')">工行账户
							<text class="iconfont"
								  style="margin:14upx;font-size:30upx;color:white">&#xe94b;</text>
						</text>
					</view>
					<text style="padding-left: 40upx" @click="goUrl('account/voucher')">缴存凭证
						<text class="iconfont"
							  style="margin:14upx;font-size:30upx;color:white">&#xe94b;</text>
					</text>
				</view>
			</view>
			<view class="explain">操作步骤说明</view>
			<view class="item-warp">
				<view v-for="i in item">
					<view class="item-lable">{{i.lable}}</view>
					<view class="item-text">{{i.text}}</view>
				</view>
			</view>
		<view class="msg">
			<span style="color:#dc4c5b">温馨提示：</span><br/>
			<div style="line-height: 34upx;margin-bottom: 10upx">1.请您务必保持诚意金开户信息与房地产公司登记信息一致</div>
			<div style="line-height: 34upx">2.如果您未持有工行账户，可通过【开户】功能完成工行‖类电子账户的开户，开户时需要提供并上传本人身份证信息；
				开户成功后，请尽快完成资金和诚意金缴存</div>
		</view>
		<view class="footer">
			<radio-group>
				<radio  @click.stop="this.agree=!this.agree" style="transform:scale(0.8);font-size: 36upx;margin-left: -20upx"  color="#D14F43"  :checked="agree" >我已阅读并同意</radio>
			</radio-group>
			<text style="color:#DC5C4B" @click="showPopup(1)">《个人银行结算账户管理协议》</text>和
			<text style="color:#DC5C4B" @click="showPopup(2)">《中国工商用户借记卡章程》</text>
		</view>
		<view class="set-bottom"/>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				userData:uni.getStorageSync('data')||false,
				agree:false,
				popup:0,
				item:[{
					lable:'①缴存诚意金',
					text:'指定您的工行账户作为诚意金账户，并将账户中的资金进行冻结，作为诚意金缴存',
					icon:'',
				},{
					lable:'②去开户',
					text:'为您开立工行‖类电子账户作为诚意金账户，并绑定他行∣类账户',
					icon:'',
				},{
					lable:'③工行账户',
					text:'查看您的工行‖类电子账户，支持与绑定的工行或他类∣类账户进行资金的转入或转出',
					icon:'',
				},{
					lable:'④缴存凭证',
					text:'可查看您的已经缴存成功的诚意金信息',
					icon:'',
				},],
			}
		},
		onShow() {

		},
		methods: {
			showPopup(num){
				uni.navigateTo({
					url: '../account/agreement?type='+num
				});
			},
			goUrl(url){
				if(url=='steps/index1'&&!this.agree){
					uni.showModal({
						title: '提示',
						content: '请先阅读并同意并同意《个人银行结算账户管理协议》和《中国工商用户借记卡章程》',
						showCancel: false,
					});
					return
				}
				uni.navigateTo({
					url: '../'+url
				});
			},
		}
	}
</script>

<style scoped>
	.content {
		height: 100%;
		padding-top: 20upx;
	}

	.information{
		width: 88%;
		margin-left: 3%;
		line-height: 20px;
		border-radius: 6px;
		background-color: rgba(220, 92, 75, 1);
		padding: 0 3%;
	}
	.title{
		color: rgba(255, 255, 255, 1);
		font-size: 28upx;
		line-height: 70upx;
		font-family: PingFangSC-regular;
	}
	.center{
		display: flex;
		margin-top: 40upx;
	}
	.yet-icon{
		width: 48upx;
		height: 48upx;
		margin-right: 20upx;
		margin-top: 8upx;
	}
	.yet-text{
		font-size: 40upx;
		width:180upx;
		color: white;
		line-height: 60upx;
	}
	.prestore-button{
		border-radius:120upx;
		background: white;
		text-align: center;
		height: 66upx;
		width: 184upx;
		line-height: 66upx;
		color: rgba(220, 92, 75, 1);
		font-size: 26upx;
		font-family: PingFangSC-regular;
	}
	.bottom{
		border-top:1px solid rgba(223, 132, 120, 1);
		margin-top: 40upx;
		color: rgba(255, 255, 255, 1);
		font-size: 32upx;
		font-family: PingFangSC-regular;
		padding: 20upx 0;
		display: flex;
	}
	.bottom-icon{
		width: 32upx;
		height: 32upx;
		margin-top: 6upx;
	}
	.explain{
		color: rgba(16, 16, 16, 1);
		font-size: 32upx;
		padding:20upx 0 0 3%;
		line-height: 100upx;
		font-family: PingFangSC-regular;
	}


	.item-warp{
		width: 94%;
		margin-left: 3%;
		border-radius: 12upx;
		border: 1px solid #dfdfdf;
	}
	.item-lable{
		width: 120upx;
		height: 34upx;
		padding-left: 10upx;
		line-height:34upx;
		border-radius: 12upx 0 12upx 0;
		background-color: rgba(220, 92, 75, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 20upx;
		font-family: PingFangSC-regular;
	}
	.item-text{
		padding: 16upx 5% 22upx 5%;
		color: #686868;
		font-size: 28upx;
		font-family: PingFangSC-regular;
	}
	.msg{
		padding-top: 30upx;
		width: 93%;
		margin-left: 3%;
		color: rgba(123, 123, 123, 1);
		font-size: 28upx;
		margin-bottom: 180upx;
		padding-bottom:constant(safe-area-inset-bottom);
		padding-bottom:env(safe-area-inset-bottom);
	}
	.footer{
		width: 94%;
		height: 116upx;
		position: fixed;
		bottom:  0px;
		box-shadow: 0px 0px 8px 4px rgba(240, 240, 240, 1);
		background: white;
		color: rgba(79, 79, 79, 1);
		font-size: 24upx;
		font-family: PingFangSC-regular;
		padding-top: 24upx;
		padding-left: 3%;
		padding-right: 3%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/*margin-bottom: ;*/
	}
	.safety{
		width:100%;
		height: constant(safe-area-inset-bottom);
		height:env(safe-area-inset-bottom);
	}

</style>
